import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import HomeBanner from './c-cpns/home-banner'
import { HomeWrapper } from './style'
import React, { memo, useEffect } from 'react'
import { fetchHomeDataAction } from '@/store/modules/home'
import HomeSectionV1 from './c-cpns/home-section-v1'
import HomeSectionV2 from './c-cpns/home-section-v2'
import HomeLongFor from './c-cpns/home-long-for'
import HomeSectionV3 from './c-cpns/home-section-v3'
import { changeHeaderConfigAction } from '@/store/modules/main'

const Home = memo(() => {
  // 派发异步事件,发送网络请求
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchHomeDataAction())
    // 当前页面的固定配置
    dispatch(changeHeaderConfigAction({ isFixed: true, topAlpha: true }))
  }, [dispatch])

  // 从 Redux 中获取数据
  const { goodPriceInfo, highScoreInfo, discountInfo, recommendInfo, longforInfo, plusInfo } = useSelector((state) => {
    return {
      goodPriceInfo: state.home.goodPriceInfo,
      highScoreInfo: state.home.highScoreInfo,
      discountInfo: state.home.discountInfo,
      recommendInfo: state.home.recommendInfo,
      longforInfo: state.home.longforInfo,
      plusInfo: state.home.plusInfo,
    }
  }, shallowEqual)

  return (
    <HomeWrapper>
      <HomeBanner />
      <div className="content">
        {Object.keys(longforInfo) && <HomeLongFor infoData={longforInfo} />}
        {/* 确保当 discountInfo 有值时才渲染对应的组件 */}
        {Object.keys(discountInfo).length && <HomeSectionV2 infoData={discountInfo} />}
        {Object.keys(recommendInfo).length && <HomeSectionV2 infoData={recommendInfo} />}
        {Object.keys(goodPriceInfo).length && <HomeSectionV1 infoData={goodPriceInfo} />}
        {Object.keys(highScoreInfo).length && <HomeSectionV1 infoData={highScoreInfo} />}
        {Object.keys(plusInfo).length && <HomeSectionV3 infoData={plusInfo} />}
      </div>
    </HomeWrapper>
  )
})

export default Home
